<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-if="dragging === false">
        <div class="margin-block" v-if="module.margin && module.margin.top"></div>
        <div v-cloak :class="{ box: true }" :style="{
            backgroundColor: bgColor,
            backgroundImage: bgImage,
            backgroundSize: bgSize,
            backgroundPosition: bgPosition,
            position: positionValue,
            left: leftValue,
            right: rightValue,
            bottom: bottomValue,
            top: topValue,
            zIndex: zIndexValue,
            width: widthValue,
            boxShadow: shadowEnable ? shadowConfig : 'none',
            borderRadius: borderRadiusValue,
        }" @contextmenu.prevent="$refs.menu.open" @click.prevent="clickHandle" @mouseenter="isHover = true"
            @mouseleave="isHover = false">
            <div class="padding-block" v-if="module.padding && module.padding.top"></div>
            <box-header v-if="showHeader" :module="module.header"></box-header>
            <div class="body">
                <slot></slot>
            </div>
            <div :class="{ border: true, active: active }">
                <!-- 鼠标悬浮、选中后模块的外边框。直接在module-box最外层用border属性，会导致边框占用了module-box的宽度而挤压，因此单独用一个层来绘制边框效果 -->
            </div>

            <div class="padding-block" v-if="module.padding && module.padding.bottom"></div>

            <!-- 右键菜单 -->
            <vue-context v-if="dragging == false" ref="menu" close-on-click>
                <li>
                    <a href="#" v-if="canMoveUp" @click="moveHandle(-1)">上移</a>
                </li>
                <li>
                    <a href="#" v-if="canMoveDown" @click="moveHandle(1)">下移</a>
                </li>
                <li>
                    <a href="#" v-if="module.canDelete !== undefined ? module.canDelete : true" @click="deleteHandle()">删除</a>
                </li>
            </vue-context>

            <!-- 右侧悬浮显示的工具条 -->
            <div v-if="dragging == false" class="module-item-toolbar" :style="{ display: isHover ? 'flex' : 'none' }">
                <div v-if="canMoveUp" class="module-item-toolbar-icon module-item-toolbar-up" @click.stop="moveHandle(-1)">
                    <i class="el-icon-top"></i>
                </div>
                <div v-if="canMoveDown" class="module-item-toolbar-icon module-item-toolbar-down"
                    @click.stop="moveHandle(1)">
                    <i class="el-icon-bottom"></i>
                </div>
                <div v-if="module.canDelete !== undefined ? module.canDelete : true" class="module-item-toolbar-icon module-item-toolbar-delete"
                    @click.stop="deleteHandle()">
                    <i class="el-icon-close"></i>
                </div>
            </div>
        </div>
        <div class="margin-block" v-if="module.margin && module.margin.bottom"></div>
    </div>
    <div v-else>
        <div class="dragging">{{ module.label || module.name }}</div>
    </div>
</template>

<script>
import VueContext from "vue-context";
import BoxHeader from "./Header/Index";
import "vue-context/src/sass/vue-context.scss";
export default {
    components: { VueContext, BoxHeader },
    name: "ModuleBox",
    data () {
        return {
            defaultPadding: 10,
            isHover: false,
            loading: true,
        };
    },
    props: {
        dragging: { type: Boolean, default: false },
        module: { type: Object },
        radius: { type: Number, default: 0 },
        index: { type: Number },
        shadowConfig: { type: String },
        maxIndex: { type: Number },
    },

    watch: {
        isHover: function (val) {
            if (val == false) {
                this.$refs.menu.close();
            }
        },
        module: function (v1, v2) {
            if (v2) {
                this.loading = false;
            }
        },
    },

    mounted: function () {
        this.loading = false;
        console.log("module data :", this.module);
    },

    computed: {
        showHeader: function () {
            if (
                this.module &&
                this.module.header &&
                this.module.header.hidden != true
            ) {
                return true;
            }
            return false;
        },
        active: function () {
            // 是否激活选中
            // 拖动中不处理
            if (this.dragging === true) {
                return false;
            }
            var focus = this.$store.state.pagemaker.focus;
            var index = this.$store.state.pagemaker.currentModuleIndex;
            if (focus == "module" && index == this.index) {
                return true;
            }
            return false;
        },
        canMoveUp: function () {
            return this.index == 0 ? false : true;
        },
        canMoveDown: function () {
            return this.index == this.maxIndex ? false : true;
        },
        canDelete: function () {
            return true;
        },

        borderRadiusValue: function () {
            var r = this.module.radius;
            // if (r && r.value) {
            //     return r.value + "px";
            // }
            // return "0px";

            if(r && r.editAllRadius){
                return r.lefttop + 'px' + ' ' + r.righttop + 'px' + ' ' + r.rightbottom + 'px' + ' ' + r.leftbottom + 'px'
            } else if (r && r.value) {
                return r.value + "px";
            }
            return "0px";
        },

        widthValue: function () {
            var w = this.module.width;
            if (w && w.size == "small") {
                return "690px";
            }
            if (w && w.size == "large") {
                return "710px";
            }
            return "750px";
        },

        positionValue: function () {
            var p = this.module.position;
            if (p && p.mode) {
                return p.mode;
            }
            return "static";
        },

        leftValue: function () {
            var p = this.module.position;
            if (p && p.xMode == "left") {
                return p.xValue + "px";
            }
            return null;
        },
        rightValue: function () {
            var p = this.module.position;
            if (p && p.xMode == "right") {
                return p.xValue + "px";
            }
            return null;
        },

        bottomValue: function () {
            var p = this.module.position;
            if (p && p.yMode == "bottom") {
                return p.yValue + "px";
            }
            return null;
        },

        topValue: function () {
            var p = this.module.position;
            if (p && p.mode == "fixed") {
                return (p.yValue + 100) + "px";
            }
            if (p && p.yMode == "top") {
                return p.yValue + "px";
            }
            return null;
        },

        zIndexValue: function () {
            var p = this.module.position;
            if (p && p.zIndex) {
                return p.zIndex;
            }
            return 10;
        },

        shadowEnable: function () {
            if (this.module.shadow && this.module.shadow.value == "on") {
                return true;
            }
            return false;
        },

        bgImage: function () {
            var cat = this.module.background.cat;
            if (cat !== "custom") {
                return null;
            }
            if (!this.module.background.image) {
                return null;
            }
            return "url('" + this.module.background.image + "')";
        },

        bgWidth: function () {
            var w = this.module.background.width;
            if (!w) {
                return "100%";
            }
            if (w == "auto" || w == "100%") {
                return w;
            }
            w = parseInt(w);
            return w + "px";
        },

        bgSize: function () {
            return this.bgWidth + " " + this.bgHeight;
        },

        bgPosition: function () {
            var x = this.module.background.positionX;
            var y = this.module.background.positionY;
            return x + "px " + y + "px";
        },

        bgHeight: function () {
            var h = this.module.background.height;
            if (!h) {
                return "auto";
            }
            if (h == "auto" || h == "100%") {
                return h;
            }
            h = parseInt(h);
            return h + "px";
        },

        bgColor: function () {
            var defaultColor = "rgba(255,255,255,1)";
            if (!this.module.background || !this.module.background.cat) {
                return defaultColor;
            }

            var cat = this.module.background.cat;
            switch (cat) {
                case "default":
                    return defaultColor;
                case "none":
                    return "rgba(0,0,0,0)";
                case "auto":
                    return this.$store.state.myconfig.color.primary || '#1989fa';
                case "custom":
                    return this.module.background.color;
            }
            return defaultColor;
        },
    },

    methods: {
        clickHandle: function () {
            // 改变焦点, 取消右键菜单
            var index = this.index;
            this.$store.commit("pagemaker/setCurrentModuleIndex", index);
            this.$store.commit("pagemaker/setFocus", "module");

            this.$refs.menu.close();
        },
        onDrag: function (e) {
            console.log("on darg", e);
        },
        onResize: function (e) {
            console.log("on resize", e);
        },
        moveHandle: function (val) {
            this.$emit("move", this.index, val);
        },
        deleteHandle: function () {
            this.$emit("delete", this.index);
        },
    },
};
</script>

<style scoped lang="scss">
.box {
    overflow: hidden;
    transition: all 0.5s;
    padding: 0;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.box .body {
    width: 100%;
}

.margin-block,
.padding-block {
    height: 16px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    display: block;
    background: none;
}

.module-item-toolbar {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #fff;
    justify-content: space-around;
    align-items: center;
    font-size: 28px;
    background: #2e3842;
    z-index: 999999;
    display: flex;
}

.header-blank {
    height: 20px;
    display: block;
}

.module-item-toolbar-icon {
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.module-item-toolbar-icon:hover {
    opacity: 0.9;
}

.border {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.border:hover {
    border: 2px dashed #1989fa;
}

.border.active {
    border: 2px solid #1989fa;
}

.dragging {
    height: 60px;
    font-size: 28px;
    color: #333;
    background: #f9f9f9;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #cecece;
    margin: 20px auto 20px auto;
    cursor: move;
}

.dragging:hover {
    // margin-top: 60px;
}
</style>
